<template>
    <div id="main">
        <div class="container">
            <h1 class="t-c m-b-25">管理中心</h1>
            <el-form ref="form" :model="form">
                <el-form-item prop="username">
                    <el-input ref="username" v-model="form.username" placeholder="请输入账号" prefix-icon="el-icon-user">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input ref="password" v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-lock"
                        show-password @keyup.enter="submit">
                    </el-input>
                </el-form-item>
                <el-form-item class="t-r">
                    <el-button type="primary" @click="submit">登录</el-button>
                    <el-button type="danger" @click="reset(form)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {
        post
    } from '@/network/request'
    export default {
        name: 'Login',
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            reset() {
                this.$refs['form'].resetFields()
            },
            submit() {
                if (this.form.username == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入账号',
                        offset: 60
                    })
                    this.$refs['username'].focus()
                    return false
                }
                if (this.form.password == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入密码',
                        offset: 60
                    })
                    this.$refs['password'].focus()
                    return false
                }

                post('/login', this.form).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        sessionStorage.setItem('token', result.data.token)
                        sessionStorage.setItem('nickname', result.data.nickname)
                        this.$router.push('/main')
                    } else {
                        this.$alert(result.message, '系统提示', {
                            confirmButtonText: '确定'
                        })
                    }
                }).catch()
            }
        }
    }
</script>

<style scope>
    html {
        height: 100%;
    }

    #main {
        background-color: #404040;
        color: #fff;
        min-width: 800px;
        height: 100%;
        min-height: 600px;
    }

    .container {
        border-radius: 10px;
        position: absolute;
        top: -50px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 560px;
        height: 370px;
        padding: 50px 100px;
        border: 3px solid #fff;
    }

    .el-input__inner {
        border-color: #fff;
    }

    .el-input__inner:focus {
        background: #fff;
        border-color: #aaa;
    }
</style>